﻿@page "/Signup"
@using iOSClub.Data
@using iOSClub.Data.DataModels
@using iOSClub.WebSite.Models
@using Microsoft.EntityFrameworkCore
@inject IMessageService _message
@inject IDbContextFactory<iOSContext> DbFactory
@inject IJSRuntime Js
@inject NavigationManager Nav

<PageTitle>创建您的iMember账号 - 西建大iOS Club</PageTitle>

<Flex Justify="center" Align="center" Class="page-flex">
    <div class="login-container">
        <div style="text-align: center;">
            <h2 style="font-size: 1.875rem;line-height: 2.25rem;color: rgba(31, 41, 55, 1);margin: 0;">注册</h2>
            <div style="color: rgba(107, 114, 128, 1);margin-top: 4px;font-size: 0.8rem">
                @switch (Index)
                {
                    case 0:
                        @("创建您的iMember账户")
                        break;
                    case 1:
                        <span>请填写您的个人信息</span>
                        break;
                    case 2:
                        <span>即将初始化您的iMember账户</span>
                        break;
                }
            </div>
        </div>
        <Form Model="Model"
              Class="signup-form"
              OnFinish="OnValidSubmit"
              RequiredMark="FormRequiredMark.Optional"
              ValidateMode="@FormValidateMode.Rules">
            @switch (Index)
            {
                case 0:
                    <FormItem Class="item" Label="姓名" Rules="@(SignRecord.UserNameRules)">
                        <Input Placeholder="请输入您的姓名" Bordered="false" @bind-Value="@context.UserName"/>
                    </FormItem>
                    <FormItem Class="item" Label="学号" Rules="SignRecord.IdRules">
                        <Input Placeholder="请输入您的学号" Bordered="false" @bind-Value="@context.UserId">
                    </FormItem>
                    break;
                case 1:
                    <FormItem Class="item" Label="学院" Rules="SignRecord.AcademyRules">
                        <select class="form-control" @bind="@context.Academy">
                            <option value="" disabled selected>请选择学院</option>
                            @foreach (var item in SignRecord.Academies)
                            {
                                <option value="@item">@item</option>
                            }
                        </select>
                    </FormItem>
                    <FormItem Class="item" Label="专业班级" Rules="SignRecord.ClassNameRules">
                        <Input Placeholder="请输入您的专业班级" Bordered="false" @bind-Value="@context.ClassName">
                    </FormItem>
                    <FormItem Class="item" Label="手机号码" Rules="SignRecord.PhoneNumRules">
                        <Input Placeholder="请输入您的手机号码" Bordered="false" @bind-Value="@context.PhoneNum">
                    </FormItem>
                    break;
                case 2:
                    <FormItem Class="item" Label="性别" Rules="SignRecord.GenderRules">
                        <RadioGroup @bind-Value="@context.Gender" ButtonStyle="@RadioButtonStyle.Solid">
                            @foreach (var item in SignRecord.Genders)
                            {
                                <Radio RadioButton Value="@item">@item</Radio>
                            }
                        </RadioGroup>
                    </FormItem>
                    <FormItem Class="item" Label="政治面貌" Rules="SignRecord.PoliticalLandscapeRules">
                        <RadioGroup @bind-Value="@context.PoliticalLandscape" ButtonStyle="@RadioButtonStyle.Solid">
                            @foreach (var item in SignRecord.PoliticalLandscapes)
                            {
                                <Radio RadioButton Value="@item">@item</Radio>
                            }
                        </RadioGroup>
                    </FormItem>
                    break;
            }
            <FormItem>
                <div style="text-align: center;margin-bottom: 1rem;margin-top: 1rem">
                    @if (Index != 0)
                    {
                        <Button class="apple-button" Type="@ButtonType.Primary" OnClick="OnPreClick">退回</Button>
                    }
                    <Button class="apple-button"
                            Type="@ButtonType.Primary"
                            HtmlType="submit">
                        下一步
                    </Button>
                </div>
                @if (Index == 0)
                {
                    <Paragraph class="Submit" Style="text-align: center">
                        已经有iMember账户了？
                        <AppleLink Url="Login" IsIcon="false">现在登录!</AppleLink>
                    </Paragraph>
                }
            </FormItem>
        </Form>
    </div>
</Flex>



@code {

    private int Index { get; set; }

    private void OnPreClick()
    {
        Index--;
    }

    private async Task OnValidSubmit()
    {
        if (Index == 2)
        {
            await using var context = await DbFactory.CreateDbContextAsync();
            var f = await context.Students.FirstOrDefaultAsync(x => x.UserId == Model.UserId);
            if (f == null) context.Students.Add(Model);

            await context.SaveChangesAsync();

            if (isWeiXin)
            {
                Nav.NavigateTo("/IOSPic");
                return;
            }

            await Js.InvokeVoidAsync("NavigateTo", SignRecord.ios.qqApi, SignRecord.ios.https);

            return;
        }

        if (Index == 0)
        {
            await using var context = await DbFactory.CreateDbContextAsync();

            var permission = await context.Staffs.FirstOrDefaultAsync(x => x.UserId == Model.UserId && x.Name == Model.UserName);

            if (permission != null)
            {
                await _message.Info("该成员已存在!");
                return;
            }

            var signModel = await context.Students.FirstOrDefaultAsync(x => x.UserId == Model.UserId && x.UserName == Model.UserName);
            if (signModel != null)
            {
                await _message.Info("该成员已存在!");
                return;
            }
        }

        Index++;
    }

    private StudentModel Model { get; } = new();
    private bool isWeiXin;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            isWeiXin = await Js.InvokeAsync<bool>("isWeiXin");
            StateHasChanged();
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    [Serializable]
    public class UserClass
    {
        public string PrimaryPhone { get; set; } = "";
        public string Password { get; set; } = "";
        public string Name { get; set; } = "";
    }

}

<style>
    .item {
        padding-top: .5rem;
    }

    select {
        width: 100%;
        padding: 0 0.5rem;
        border: none;
        background-color: white;
        appearance: none; /* 移除默认样式 */
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 15px center;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    select:focus {
        outline: none;
    }

    select:hover {
        border-color: #0071e3;
    }

    option {
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
    }

    option:hover {
        background-color: #0071c1;
    }


    body, html {
        font-size: 18px;
        overflow: hidden;
    }

    .login-container {
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.7);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        padding: 2rem;
        border-radius: 1rem;
        width: 28rem;
    }

    .page-flex {
        height: calc(100vh - 170px);
    }

    .apple-button {
        border-radius: 4px
    }

    @@media screen and (max-width: 768px) {
        .login-container {
            width: 100%;
            box-shadow: none;
            padding-bottom: 0;
        }

        .page-flex {
            align-items: flex-start !important;
        }
    }
</style>